import React, {Component} from 'react'

export default class Demo13_lianxi_todo_list extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataList: []
    }
    let {title} = {...props}
    console.log(title);
  }

  componentDidMount() {

  }

  onChange() {
    //console.log(this.refs.input.value);

  }

  buttonClick() {
    // console.log(this.refs.input.value);
    let nowList = this.state.dataList;
    if (this.refs.input.value) {
      nowList.push(this.refs.input.value)
    }
    this.setState({
      dataList: nowList
    });
    //this.state.dataList.push(this.refs.input.value)
    //console.log(this.state.dataList);

  }

  fun_delete(e) {
    //console.log( e.target.getAttribute('data-key'));
    let index = e.target.getAttribute('data-key');
    //this.state.dataList.splice(index,1)
    // this.setState({
    //   dataList:this.state.dataList.splice(index,1)
    // });
    let nowList = this.state.dataList;
    nowList.splice(index, 1);
    this.setState({
      dataList: nowList
    });
  }

  render() {
    return (
        <div>
          <h1>todoList</h1>
          <div>
            <input ref="input" onChange={this.onChange.bind(this)}
                   style={{border: '0.01rem solid #ccc', height: '.44rem'}} type="text"/>
            <button onClick={this.buttonClick.bind(this)}>add</button>
          </div>
          <ul>
            {this.state.dataList.map((item, index) =>
                <li style={{fontSize: '0.28rem', marginTop: '.2rem'}} key={index}>
                  <span>{index} ------ {item}</span>
                  <button data-key={index} onClick={this.fun_delete.bind(this)}>delete</button>
                </li>
            )}
          </ul>
        </div>
    );
  }

}